<template>
    <!--财经C贴-->
    <div class="cnews-contain">
        <ul class="news-list">
            <li v-for="(item,index) in list" :key="index">
                <div class="img-left">
                    <img :src="item.zx_pic_url" alt=""/>
                </div>
                <div class="intro-right">
                    <div class="intro-title">
                        <div class="tag">{{ item.zx_biaoqian }}</div>
                        <div class="title">{{ item.zx_title }}</div>
                        <div class="publish-date">
                            <i class="icon-clock"></i>
                            <span>{{ item.create_date }}</span>
                        </div>
                    </div>
                    <div class="intro-content">
                        {{ item.zx_desc }}
                    </div>
                    <div class="bottom-option">
                        <div class="count-box">
                            <i class="icon-great"></i>
                            <span>0</span>
                        </div>
                        <div class="count-box">
                            <i class="icon-eye"></i>
                            <span>0</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="turn-box">
            <li>
                <span class="pre-turn" @click="turnPage(pageNo-1)"
                      v-if="pageNo>3"
                ></span>
            </li>
            <li v-for="(turn, index) in turnList"
                :key="index"
            >
                <span :class="{active:index+1 === pageNo}"
                      @click="turnPage(index+1)"
                      v-show="index < pageNo + 2 && index > pageNo -4 || (pageNo<4)&&index<5 || (pageNo>turnList.length-3)&&index>turnList.length-6"
                >
                    {{index + 1}}
                </span>
            </li>
            <li>
                <span @click="turnPage(pageNo+1)"
                      v-if="pageNo<turnList.length-2"
                >>></span>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        name: 'CnewsIndex',
        components: {
            /**/
        },
        data() {
            return {
                list: [],
                turnList: [],
                pageNo: 1,
                pageSize:10
            };
        },
        watch: {
            /**/
        },
        mounted() {
            this.changePage(1)
        },
        methods: {
            changePage(pageNo){
                this.pageNo = pageNo;
                this.ajaxGetData()
            },
            ajaxGetData() {
                this.$api.ajaxData({
                    pathName: 'doGetZixun',
                    params: {
                        page: this.pageNo,
                        size: this.pageSize
                    }
                }).then(res=>{
                    this.list = res.obj
                    if(res.obj.length >0) {
                        let len = Math.ceil(res.obj[0].total / this.pageSize);
                        this.turnList = new Array(len)
                    }
                })
            },
            turnPage(pageNo) {
                this.pageNo = pageNo
                this.ajaxGetData()
            }
        }
    };
</script>
<style scoped lang="scss">
.cnews-contain {
    .news-list {
        li {
            display: flex;
            margin-bottom: 20px;
            .img-left {
                flex-shrink: 0;
                width: 160px;
                height: 100px;
                margin-right: 20px;
                border-radius: 10px;
                overflow: hidden;
                background: rgba(0, 0, 0, 0.1);
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .intro-right {
                flex: 1;
                .intro-title {
                    display: flex;
                    align-items: center;
                    .tag {
                        width: 69px;
                        height: 25px;
                        line-height: 25px;
                        margin-right: 8px;
                        background-color: rgba(0, 121, 254, 1);
                        border: none;
                        border-radius: 3px;
                        -moz-box-shadow: none;
                        -webkit-box-shadow: none;
                        box-shadow: none;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 12px;
                        text-align: center;
                        color: #FFFFFF;
                    }
                    .title {
                        flex: 1;
                        font-size: 16px;
                        color: #333;
                        font-weight: 700;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .publish-date {
                        font-size: 13px;
                        color: #999;
                        text-align: right;
                        .icon-clock {
                            display: inline-block;
                            width: 15px;
                            height: 15px;
                            margin-right: 5px;
                            background: url("../../assets/image/icon/u239.png") no-repeat;
                            background-size: contain;
                            vertical-align: middle;
                        }
                        span {
                            line-height: 15px;
                            vertical-align: middle;
                        }
                    }
                }
                .intro-content {
                    line-height: 28px;
                    font-size: 13px;
                    color: #999;
                    @include ellipsis-line;
                }
                .bottom-option {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    font-size: 13px;
                    color: #999;
                    .count-box {
                        line-height: 15px;
                        margin-left: 20px;
                        .icon-great {
                            display: inline-block;
                            width: 15px;
                            height: 15px;
                            margin-right: 5px;
                            background: url("../../assets/image/icon/u240.png") no-repeat;
                            background-size: contain;
                            vertical-align: middle;
                        }
                        .icon-eye {
                            display: inline-block;
                            width: 15px;
                            height: 15px;
                            margin-right: 5px;
                            background: url("../../assets/image/icon/u241.png") no-repeat;
                            background-size: contain;
                            vertical-align: middle;
                        }
                        span {
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
    }
    .turn-box {
        display: flex;
        padding: 30px;
        align-items: center;
        justify-content: center;
        li {
            span {
                display: block;
                width: 50px;
                height: 50px;
                margin: 0 3px;
                line-height: 50px;
                border-radius: 50%;
                text-align: center;
                font-size: 20px;
                border: 1px solid rgb(204, 204, 204);
                color: rgb(204, 204, 204);
                cursor: pointer;
                -webkit-user-select: none;
                &.active {
                    border-color: rgb(0, 121, 254);
                    color: rgb(0, 121, 254);
                }
                &:hover {
                    border-color: rgb(0, 121, 254);
                    color: rgb(0, 121, 254);
                }
                &.pre-turn:before {
                    content: '<<';
                }
            }
        }
    }
}
</style>
